import React from 'react';
import {Image, Modal, StatusBar, Text, TouchableOpacity, View, StyleSheet, DeviceEventEmitter} from 'react-native';
import Constants from '../utils/Constants';
import screen from '../utils/screen';
import RequestUtil from '../utils/RequestUtil';
import DialogTip from '../widgets/modal/DialogTip';
import Api from '../utils/Api';
import {filterErrorMsg, FontFamily, getffly} from '../utils/common';
import {AppModal} from '../widgets/modal';
import Images from '../images/Images';
import {LGBtn,OLBtn} from '../widgets/buttons';

export default  class LogoutAlert extends React.Component {

    constructor(props) {
        super(props);


    }

    state={
        modalVisible:false
    }


    componentDidMount = () => {

    }



    logout = ()=>{
        this.hideDialog()
        this.onConfirm && this.onConfirm();

    }



    hideDialog = () => {

        this.setState({ modalVisible: false });
    }

    show = (onConfirm)=>{
        this.onConfirm = onConfirm
        this.setState({
            modalVisible:true
        })
    }

    renderContent(){


        return (
            <View style={styles.innerContainer}>

                <Text style={styles.title}>{'Logout'}</Text>

                <View style={styles.contentBg}>
                    <Text style={{fontSize:14,color:'#8A8A8A'}}>{'Do you want to quit now?'}</Text>
                </View>

                <OLBtn
                    title={'Continue'}
                    style={{width:'100%',height:screen.PIXEL_80}}
                    onPress={this.logout}
                />
                <View style={{height:screen.PIXEL_40}}/>
                <LGBtn
                    title={'Cancel'}
                    style={{width:'100%',height:screen.PIXEL_80}}
                    onPress={this.hideDialog}
                />



            </View>

        )
    }



    render() {




        return (
            <Modal
                animationType={'none'}
                transparent={true}
                visible={this.state.modalVisible}
                onRequestClose={() => { this._setModalVisible(false) }}
                onShow={this.startShow}
            >
                <StatusBar barStyle='light-content' translucent={true} backgroundColor="rgba(16, 17, 22,0.75)" animated={false} />
                <TouchableOpacity
                    activeOpacity={1.0}
                    onPress={() => {

                    }}
                    style={styles.bottomcontainer}>

                    <View style={styles.container}>

                        {this.renderContent()}


                    </View>
                    <DialogTip ref={ref=>{this.tipDialog = ref}} />
                </TouchableOpacity>
            </Modal>
        );
    }


    _setModalVisible = (visible) => {
        this.setState({ modalVisible: visible });
    }

    startShow = () => {

    }
}



const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center'
    },
    innerContainer: {
        width: screen.width - screen.PIXEL_100,
        padding:screen.PIXEL_40,
        backgroundColor: '#FFFFFF',
        justifyContent:'center',
        alignItems: 'center',
        borderRadius: screen.PIXEL_50
    },

    close:{
        width:screen.PIXEL_70,
        height:screen.PIXEL_70
    },
    bottomcontainer: {
        zIndex: 2,
        flex: 1,
        alignItems: 'center',
        backgroundColor: 'rgba(16, 17, 22,0.75)',
        justifyContent: 'flex-end',
    },
    title:{
        color:'#377C74',fontSize:19,fontFamily:getffly(FontFamily.medium),textAlign:'center'
    },
    contentBg:{
        marginTop: screen.PIXEL_40,width:'100%',height:screen.scaleSize(200),

    }


});



